<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>



    <form action="" >
        <div>颜色选择</div>
        <div>
            颜色选择：<input type="color" name="color">

        </div>
        <br>
        <div>邮箱输入</div>
        <div>
            邮箱：<input type="email" name="a">
        </div>

        <br>
        <div>
            <div>URL地址 (完整地址)</div>
            URL地址：<input type="url" name="" id="">
        </div>
        <br>
        <div>
            <div>电话号码 （手机上面使用）</div>
            电话号码：<input type="tel" name="" id="">
        </div>
        </div>

        <br>
        <div>
            <div>滑块效果</div>
            <!-- 设置滑块最大值最小值 max min  value 设置值 step 步长 -->
            滑块效果：<input type="range"  min="100" max="200"  step="30" value="130" name="ranger">
        </div>

        <br>
        <div>
            <div>数字类型</div>
            数字类型：<input type="number" max="10" min="0" step="2" name="age">
        </div>
        
        <br>
        <div>
            <div>搜索框</div>
            搜索框：<input type="search">
        </div>
        
        <br>
        <div>
            <div>日期选择框</div>
            日期选择：<input type="date" >
            <br>
            月份选择：<input type="month" >
            <br>
            周选择：<input type="week" >
            <br>
            日期时分秒选择：<input type="datetime-local"  name="time">
            <br>


        </div>


        </div>


        <input type="submit"  name="" id="">

    </form>


</body>

</html>